<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客编辑页</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .card-hover {
                @apply hover:shadow-lg transition-all duration-300;
            }
            .btn-hover {
                @apply transform hover:-translate-y-0.5 hover:shadow-md transition-all duration-300;
            }
            .animate-shake {
                animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
            }
            @keyframes shake {
                10%, 90% { transform: translateX(-1px); }
                20%, 80% { transform: translateX(2px); }
                30%, 50%, 70% { transform: translateX(-3px); }
                40%, 60% { transform: translateX(3px); }
            }
        }
    </style>

    <link rel="stylesheet" href="blog-editormd/css/editormd.css" />
</head>

<body class="bg-slate-50 font-sans text-slate-800 min-h-screen">
<!-- 导航栏 -->
<nav class="bg-white shadow-sm fixed top-0 left-0 right-0 z-50 transition-custom">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-3">
            <img src="pic/logo2.jpg" alt="博客系统logo" class="h-10 w-10 rounded-full object-cover shadow-md transform hover:scale-105 transition-custom">
            <span class="blog-title text-xl font-bold text-primary text-shadow">我的博客系统</span>
        </div>

        <div class="hidden md:flex items-center space-x-6">
            <a href="blog_list.html" class="nav-span text-slate-600 hover:text-primary transition-custom flex items-center gap-1.5">
                <i class="fa fa-home"></i> 主页
            </a>
            <a href="blog_edit.html" class="nav-span text-primary font-medium flex items-center gap-1.5">
                <i class="fa fa-pencil"></i> 写博客
            </a>
            <a href="#" onclick="logout()" class="nav-span text-slate-600 hover:text-red-500 transition-custom flex items-center gap-1.5">
                <i class="fa fa-sign-out"></i> 注销
            </a>
        </div>

        <!-- 移动端菜单按钮 -->
        <button class="md:hidden text-slate-600 hover:text-primary transition-custom">
            <i class="fa fa-bars text-xl"></i>
        </button>
    </div>
</nav>

<!-- 主内容区 -->
<div class="container mx-auto px-4 pt-24 pb-16">
    <div class="max-w-4xl mx-auto">
        <!-- 页面标题 -->
        <div class="mb-6 animate-fade-in">
            <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-slate-800">
                <i class="fa fa-pencil-square-o text-primary mr-2"></i>编辑博客
            </h1>
            <p class="text-slate-500 mt-1">创作并分享你的想法</p>
        </div>

        <!-- 编辑卡片 -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transform transition-all duration-500">
            <!-- 标题和发布按钮区域 -->
            <div class="p-6 border-b border-slate-100">
                <div class="flex flex-col sm:flex-row gap-4">
                    <div class="flex-1">
                        <label for="title" class="block text-sm font-medium text-slate-700 mb-1">博客标题</label>
                        <input type="text" id="title"
                               class="w-full px-4 py-3 rounded-lg border border-slate-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-custom placeholder:text-slate-300"
                               placeholder="请输入博客标题...">
                    </div>
                    <div class="sm:w-40 flex items-end">
                        <button id="submit" onclick="submit()"
                                class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-custom flex items-center justify-center gap-2 shadow-sm btn-hover">
                            <i class="fa fa-paper-plane"></i>
                            <span>发布文章</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Markdown编辑器区域 -->
            <div class="p-6">
                <label class="block text-sm font-medium text-slate-700 mb-3">
                    <i class="fa fa-edit text-primary mr-1"></i>
                    博客内容
                </label>
                <div id="editor" class="rounded-lg border border-slate-200 overflow-hidden opacity-0 transition-opacity duration-500">
                        <textarea style="display:none;" id="content" name="content">## 在这里写下一篇博客

欢迎使用Markdown编辑器，可以使用以下语法：

- **粗体文本**
- *斜体文本*
- [链接](url)
- ![图片](url)
- # 标题
- > 引用
- ```代码块```</textarea>
                </div>
            </div>

            <!-- 帮助信息 -->
            <div class="p-4 bg-slate-50 border-t border-slate-100 text-sm text-slate-500">
                <div class="flex items-start gap-2">
                    <i class="fa fa-lightbulb-o text-amber-500 mt-0.5"></i>
                    <div>
                        <p class="font-medium text-slate-700">提示</p>
                        <p>支持Markdown语法，可使用标题、列表、链接、图片等格式。发布前请检查内容是否完整。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="blog-editormd/editormd.min.js"></script>
<script src="js/common.js"></script>
<script type="text/javascript">
    // 页面滚动效果
    window.addEventListener('scroll', function() {
        const nav = document.querySelector('nav');
        if (window.scrollY > 10) {
            nav.classList.add('py-2', 'shadow');
            nav.classList.remove('py-3');
        } else {
            nav.classList.add('py-3');
            nav.classList.remove('py-2', 'shadow');
        }
    });

    // 初始化Markdown编辑器
    $(function () {
        var editor = editormd("editor", {
            width: "100%",
            height: "550px",
            path: "blog-editormd/lib/",
            // 添加编辑器加载完成的动画效果
            onload: function() {
                document.getElementById('editor').classList.add('opacity-100');
            }
        });
    });

    // 提交博客
    function submit() {
        const title = $("#title").val().trim();
        const content = $("#content").val().trim();

        // 简单验证
        if (!title) {
            showNotification("请输入博客标题", "error");
            // 添加输入框抖动效果
            const titleInput = document.getElementById('title');
            titleInput.classList.add('border-red-500', 'animate-shake');
            setTimeout(() => {
                titleInput.classList.remove('animate-shake');
            }, 600);
            return;
        }

        if (!content || content === "## 在这里写下一篇博客\n\n欢迎使用Markdown编辑器，可以使用以下语法：\n\n- **粗体文本**\n- *斜体文本*\n- [链接](url)\n- ![图片](url)\n- # 标题\n- > 引用\n- ```代码块```") {
            showNotification("请输入博客内容", "error");
            return;
        }

        // 显示提交确认
        if (!confirm('确定要发布这篇博客吗？')) {
            return;
        }

        // 显示加载状态
        const submitBtn = document.getElementById('submit');
        const originalContent = submitBtn.innerHTML;
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 发布中...';

        $.ajax({
            type: "post",
            url: "/blog/add",
            contentType: "application/json",
            data: JSON.stringify({
                "userId": localStorage.getItem("loginUserId"),
                "title": title,
                "content": content
            }),
            success: function(result) {
                if (result != null && result.code == 200 && result.data) {
                    // 博客发布成功
                    submitBtn.innerHTML = '<i class="fa fa-check"></i> 发布成功';
                    submitBtn.classList.remove('bg-primary');
                    submitBtn.classList.add('bg-secondary');

                    showNotification("博客发布成功，正在跳转到列表页...", "success");

                    setTimeout(() => {
                        location.href = "blog_list.html";
                    }, 1500);
                } else {
                    // 恢复按钮状态
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalContent;

                    // 显示错误信息
                    showNotification(result.errMsg || "发布失败，请重试", "error");
                }
            },
            error: function() {
                // 恢复按钮状态
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalContent;

                // 显示网络错误
                showNotification("网络错误，请稍后重试", "error");
            }
        });
    }

    // 显示通知提示
    function showNotification(message, type = "info") {
        // 创建通知元素
        const notification = document.createElement('div');
        notification.className = `fixed top-20 right-4 px-4 py-3 rounded-lg shadow-lg transform transition-all duration-300 translate-x-full z-50 flex items-center gap-2 ${
            type === "success" ? "bg-secondary text-white" :
                type === "error" ? "bg-red-500 text-white" :
                    "bg-primary text-white"
        }`;

        // 添加图标
        notification.innerHTML = `
                <i class="fa ${
            type === "success" ? "fa-check-circle" :
                type === "error" ? "fa-exclamation-circle" :
                    "fa-info-circle"
        }"></i>
                <span>${message}</span>
            `;

        // 添加到页面
        document.body.appendChild(notification);

        // 显示通知
        setTimeout(() => {
            notification.classList.remove('translate-x-full');
            notification.classList.add('translate-x-0');
        }, 100);

        // 3秒后隐藏通知
        setTimeout(() => {
            notification.classList.remove('translate-x-0');
            notification.classList.add('translate-x-full');

            // 移除元素
            setTimeout(() => {
                document.body.removeChild(notification);
            }, 300);
        }, 3000);
    }

    // 添加键盘快捷键 Ctrl+S 保存
    document.addEventListener('keydown', function(e) {
        if (e.ctrlKey && e.key === 's') {
            e.preventDefault();
            submit();
        }
    });
</script>
</body>

</html>
